表单控件 ‹input›

Exisi 2020-06-05 14:05:15

Categories： Tags：

<input> 元素用于为基于 Web 的表单创建交互式控件，以便接受来自用户的数据; 可以使用各种类型的输入数据和控件小部件

<input> 元素由于拥有诸多属性而异常强大，其中前文举例说明的 type 属性尤其重要。由于所有 <input> 元素，无论是哪种 type，都基于 HTMLInputElement 接口，所以理论上说，它们共享一套相同的属性。

大部分属性只作用于特定一组 type。此外，一些属性作用于 <input> 的方式取决于 <input> 的 type 属性，不同的 type 有不同的效果。

属性

说明

type

要呈现的控件类型。有关各个类型的信息

参数	描述
button	没有默认行为的按钮，上面显示 value 属性的值，默认为空。
checkbox	复选框，可设为选中或未选中。
color	用于指定颜色的控件；在支持的浏览器中，激活时会打开取色器。
date	输入日期的控件（年、月、日，不包括时间）。在支持的浏览器激活时打开日期选择器或年月日的数字滚轮。
datetime-local	输入日期和时间的控件，不包括时区。在支持的浏览器激活时打开日期选择器或年月日的数字滚轮。
email	编辑邮箱地址的区域。类似 text 输入，但在支持的浏览器和带有动态键盘的设备上会有确认参数和相应的键盘。
file	让用户选择文件的控件。使用 accept 属性规定控件能选择的文件类型。
hidden	不显示的控件，其值仍会提交到服务器。举个例子，右边就是一个隐形的控件。
image	带图像的 submit 按钮。显示的图像由 src 属性规定。如果 src 缺失，alt 属性就会显示。
month	输入年和月的控件，没有时区。
number	用于输入数字的控件。如果支持的话，会显示滚动按钮并提供缺省验证（即只能输入数字）。拥有动态键盘的设备上会显示数字键盘。
password	单行的文本区域，其值会被遮盖。如果站点不安全，会警告用户。
radio	单选按钮，允许在多个拥有相同 name 值的选项中选中其中一个。
range	此控件用于输入不需要精确的数字。控件是一个范围组件，默认值为正中间的值。同时使用 min 和 max 来规定值的范围。
reset	此按钮将表单的所有内容重置为默认值。不推荐。
search	用于搜索字符串的单行文字区域。输入文本中的换行会被自动去除。在支持的浏览器中可能有一个删除按钮，用于清除整个区域。拥有动态键盘的设备上的回车图标会变成搜索图标。
submit	用于提交表单的按钮。
tel	用于输入电话号码的控件。拥有动态键盘的设备上会显示电话数字键盘。
text	默认值。单行的文本区域，输入中的换行会被自动去除。
time	用于输入时间的控件，不包括时区。
url	用于输入URL 的控件。类似 text 输入，但有验证参数，在支持动态键盘的设备上有相应的键盘。
week	用于输入以年和周数组成的日期，不带时区。

如果该元素的 type 属性的值是 file，则该属性表明了服务器端可接受的文件类型；否则它将被忽略。该属性的值必须为一个逗号分割的列表，包含了多个唯一的内容类型声明：

以 STOP 字符 (U+002E) 开始的文件扩展名。（例如：".jpg,.png,.doc"）
一个有效的 MIME 类型，但没有扩展名
audio/* 表示音频文件
video/* 表示视频文件
image/* 表示图片文件

autocomplete

这个属性表示这个控件的值是否可被浏览器自动填充。如果 type 属性的值是 hidden、checkbox、radio、file，或为按钮类型（button、submit、reset、image），则本属性被忽略。可用的值是：

参数	说明
off	用户必须手动填值，或者该页面提供了自己的自动补全方法。浏览器不对此字段自动填充。
on	浏览器可以根据用户先前的填表情况对此字段自动填值。
name	完整的姓名
honorific-prefix	前缀或标题 (e.g. "Mr.", "Ms.", "Dr.", "Mlle")
given-name	名
additional-name
family-name	姓
honorific-suffix	后缀 (e.g. "Jr.", "B.Sc.", "MBASW", "II")
nickname	昵称
email	邮箱
username	用户名
new-password	新密码（如创建帐号或更改密码时使用）
current-password	当前密码
organization-title	职称 (e.g. "Software Engineer", "Senior Vice President", "Deputy Managing Director")
organization
street-address
address-line1 address-line2 address-line3 address-level4 address-level3 address-level2 address-level1
country	国家
country-name	国家名称
postal-code
cc-name	支付工具上的全名
cc-given-name
cc-additional-name
cc-family-name
cc-number	识别支付工具的代码（例如信用卡号）
cc-exp	支付工具的到期日
cc-exp-month
cc-exp-year
cc-csc	支付工具的安全码
cc-type	支付工具的类型（例如 Visa）
transaction-currency
transaction-amount
language	首选语言;有效的 BCP 47 语言标签
bday
bday-day
bday-month
bday-year
sex	性别认同（例如女性、Fa'afafine）；自由格式的文本，没有换行符
tel	电话
url	与该字段关联的其他字段中的公司、人员、地址或联系信息对应的主页或其他网页
photo	与此字段关联的其他字段中的公司、人员、地址或联系信息对应的照片、图标或其他图像

如果 <input> 元素上没有 autocomplete 属性，浏览器可使用包含该 input 元素的表单（<form>）或通过 input 的 form 属性指定的表单的 autocomplete 属性值

autofocus

这个布尔属性允许您指定的表单控件在页面加载时具有焦点（自动获得焦点），除非用户将其覆盖，例如通过键入不同的控件。文档中只有一个表单元素可以具有 autofocus 属性，它是一个布尔值。如果 type 属性设置为隐藏则不能应用（即您不能自动获得焦点的属性设置为隐藏的控件）。

capture

在 HTML 媒体捕获规范中引入并且仅对文件输入类型有效，捕获属性定义了应该使用哪种媒体（麦克风、视频或相机）来捕获新文件以在支持场景中使用文件上传控制进行上传。查看文件输入类型。

checked

如果该元素的 type 属性的值为 radio 或者 checkbox，则该布尔属性的存在与否表明了该控件是否是默认选择状态

如果存在于复选框类型上，则表示默认情况下选中该复选框（当页面加载时）。它不表示当前是否选中此复选框：如果复选框的状态发生更改，则此内容属性不反映更

注

与其他输入控件不同，复选框和单选按钮值仅在当前选中时才包含在提交的数据中。如果是，则提交被选中控件的名称和值。例如，如果名称为fruit的复选框的值为cherry，并且该复选框被选中，则提交的表单数据将包括fruit=cherry .如果复选框未激活，则根本不会在表单数据中列出。复选框和单选按钮的默认值为 on

dirname

仅对文本和搜索输入类型有效，dirname 属性允许提交元素的方向性。包含时，表单控件将提交两个名称/值对：第一个是名称和值，第二个是 dirname 的值作为名称，其中 ltr 或 rtl 的值由浏览器设置。

disabled

这个布尔属性表示此表单控件不可用。特别是在禁用的控件中， click 事件将不会被分发。并且，禁用的控件的值在提交表单时也不会被提交。如果 type 属性为 hidden，此属性将被忽略。

form

一个字符串，指定与输入关联的 <form> 元素（即其表单所有者）。此字符串的值（如果存在）必须与同一文档中的 <form> 元素的 id 匹配。如果未指定此属性，则 <input> 元素与最近的包含表单（如果有）相关联。form 属性允许您将输入放置在文档中的任何位置，但将其包含在文档中其他位置的表单中。注意：一个输入只能与一个表单相关联。

formaction